<template>
  <PageWrapper contentFullHeight>
    <ListTemplate :register-table="registerTable" :method="methods" :showAddBtn="false">
      <template #addBtnSlot>
        <a-dropdown>
          <template #overlay>
            <a-menu @click="handleMenuClick">
              <a-menu-item key="1">千瓜平台</a-menu-item>
              <a-menu-item key="2">小红书话题</a-menu-item>
            </a-menu>
          </template>
          <a-button type="primary">
            创建任务
            <DownOutlined />
          </a-button>
        </a-dropdown>
      </template>
    </ListTemplate>
    <column-model @register="registerModel" @success="tableMethods.reload" />
  </PageWrapper>
</template>
<script setup lang="ts">
  import ListTemplate from '@/views/common/operate/listTemplate.vue';
  import PageWrapper from '@/components/Page/src/PageWrapper.vue';
  import ApiV1 from '@/views/common/operate/ApiV1';

  import { useGo } from '@/hooks/web/usePage';

  import {
    Dropdown as ADropdown,
    Menu as AMenu,
    MenuItem as AMenuItem,
    MenuProps,
  } from 'ant-design-vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import { getlist, startfetch } from '@/views/dp_platform/qiangua.api';
  import { useQianguaColumns } from '@/views/dp_platform/qiangua.data';
  import { ActionItem } from '@/components/Table';
  import ColumnModel from '@/views/dp_platform/components/columnModel.vue';
  import { useModal } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';

  defineOptions({
    name: 'QianguaIndex',
  });
  const go = useGo();
  const { createMessage } = useMessage();
  const [registerModel, { openModal }] = useModal();
  const { registerTable, methods, tableMethods } = ApiV1.useList({
    tableProps: {
      api: getlist,
      columns: useQianguaColumns(),
      useSearchForm: false,
      actionColumn: {
        width: 300,
      },
    },
    editActionItem: {
      auth: 'brand:policy:edit',
    },
    delActionItem: {
      ifShow: false,
    },
    mode: 'page',
    pageMethod: {
      addFn: () => {
        go('/qiangua/handle');
      },
    },
    actionItems: (data, record): Array<ActionItem> => {
      return [
        {
          label: '导出列',
          icon: 'mingcute:column-line',
          type: 'default',
          onClick: () => {
            openModal(true, { record });
          },
        },
        {
          label: '开始',
          icon: 'bi:skip-start-circle',
          type: 'default',
          ifShow: record['status'] == '0',
          onClick: async () => {
            await startfetch(record['id']);
            createMessage.success('操作成功');
            await tableMethods.reload();
          },
        },
        {
          label: '查看',
          icon: 'material-symbols:view-cozy-outline',
          type: 'default',
          ifShow: record['status'] > 0,
          onClick: () => {
            go('/dp/dplist?groupId=' + record['id']);
          },
        },
        {
          label: '导出Excel',
          icon: 'icon-park-outline:excel',
          type: 'primary',
          ifShow: record['status'] == '2',
          onClick: () => {
            openModal(true, { record });
          },
        },
      ];
    },
  });
  const handleMenuClick: MenuProps['onClick'] = (e) => {
    go('/dp/handle?type=' + e.key);
  };
</script>
